<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<title>订单信息</title>
		<meta name="renderer" content="webkit">
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
		<meta name="viewport"
			content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
		<link rel="stylesheet" href="../../../layuiadmin/layui/css/layui.css" media="all">
		<link rel="stylesheet" href="../../../layuiadmin/style/admin.css" media="all">
		<link rel="stylesheet" href="../../../css/common.css" media="all">
		<style>
			.list-tb-div td .tDiv {
				padding: 0px;
				text-align: center;
				word-break: break-all;
			}

			.importane {
				font-size: 15px;
				color: #F00;
				font-weight: 600;
			}

			.tpinfo {
				min-height: 100px;
				border-bottom: 1px solid #ececec;
			}

			.td-product img {
				border: 1px solid #efefef;
				padding: 1px;
			}

			.list-tb-div td .tDiv {
				padding: 10px;
				text-align: center;
				word-break: break-all;
			}

			.list-tb-div td .tDiv.left {
				padding: 10px;
				text-align: left;
				word-break: break-all;
			}

			.list-tb-div .td-product .product-info {
				padding-left: 90px;
				text-align: left;
				margin-top: 20px;
			}

			blockquote,
			body,
			button,
			dd,
			div,
			dl,
			dt,
			form,
			h1,
			h2,
			h3,
			h4,
			h5,
			h6,
			input,
			li,
			ol,
			p,
			pre,
			td,
			textarea,
			th,
			ul {
				margin: 0;
				padding: 0;
				-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
			}

			.list-tb-div table {
				margin-bottom: 5px;
				font-size: 12.5px;
			}

			.list-div table {
				width: 120%;
			}

			table {
				border-collapse: collapse;
				border-spacing: 0;
			}

			.list-tb-div .td-product .img {
				width: 80px;
				height: 80px;
			}

			.list-tb-div .tr-order-sn .tDiv {
				text-align: left;
				padding: 0;
			}

			.list-tb-div td .tDiv {
				padding: 10px;
				text-align: center;
				word-break: break-all;
			}

			.list-tb-div td .ml10 {
				padding-left: 5px;
			}

			.list-tb-div td .ml10 .words {
				margin-left: 10px;
				margin-right: 10px;
				line-height: 28px;
			}

			.list-tb-div .tr-order-sn .tDiv.center {
				text-align: center;
				padding: 0;
			}

			.layui-table td,
			.layui-table th {
				position: relative;
				padding: 9px 15px;
				min-height: 20px;
				line-height: 20px;
				font-size: 14px;
			}

			td .layui-table-cell {
				text-align: center;
				height: 100px;
				white-space: normal;
			}

			.layui-table img,
			.layui-table video {
				width: 50px;
				max-width: 60px;
			}

			td .layui-table-cell {
				text- align: center;
				height: auto;
				white-space: normal;
			}

			.tDiv {
				font-size: 10px;
				line-height: 15px;
			}

			.tDiv-price {
				font-size: 15px;
				line-height: 18px;
			}
		</style>
	</head>

	<body>
		<div class="layui-fluid">
			<div class="layui-row layui-col-space15">
				<div class="layui-col-md12">
					<div class="layui-card">
						<div class="layui-card-header table-operate-btn">
							<button class="layui-btn layui-btn-danger layui-btn-sm" data-type="del">删除</button>
						</div>
						<div class="layui-tab layui-tab-brief" lay-filter="changetab">
							<ul class="layui-tab-title" id="view_ul"></ul>
							<div class="layui-card-body">
								<!-- 搜索 -->
								<form class="layui-form search" id="form" onsubmit="return false" action="##">
									<div class="layui-inline search_inline">
										<label class="layui-form-label">下单时间：</label>
										<div class="layui-input-inline">
											<input class="layui-input" id="choosetime" style="width: 300px;"
												placeholder="下单时间" autocomplete="off">
											<input class="layui-input" type="text" name="s_dates" placeholder=""
												autocomplete="off" style="display: none;">
											<input class="layui-input" type="text" name="e_dates" placeholder=""
												autocomplete="off" style="display: none;">
										</div>
									</div>
									<div class="layui-inline search_inline">
										<label class="layui-form-label">订单编号：</label>
										<div class="layui-input-inline">
											<input class="layui-input" lay-verify="" name="orderid" placeholder="订单编号"
												autocomplete="off">
										</div>
									</div>
									<div class="layui-inline search_inline">
										<label class="layui-form-label">用户姓名、手机号：</label>
										<div class="layui-input-inline">
											<input class="layui-input" lay-verify="keyword" placeholder="用户姓名、手机号"
												name="keyword" autocomplete="off">
										</div>
									</div>
									<div class="layui-inline search_inline">
										<label class="layui-form-label">订单类型：</label>
										<div class="layui-input-inline">
											<select name="order_type" lay-verify="order_type">
												<option value="6,7" selected>全部</option>
												<option value="6">团购订单</option>
												<option value="7">团购拼团订单</option>
											</select>
										</div>
									</div>
									<div class="layui-inline search_inline">
										<label class="layui-form-label">期号：</label>
										<div class="layui-input-inline">
											<input class="layui-input" lay-verify="" name="seckill_no"
												placeholder="拼团期号" autocomplete="off">
										</div>
									</div>
									<div class="layui-inline search_inline">
										<label class="layui-form-label">交易方式：</label>
										<div class="layui-input-inline">
											<select name="payment" class="payment"></select>
										</div>
									</div>

									<button class="layui-btn search_inline" lay-submit="" lay-filter="search"
										data-type="reload">搜索</button>
									<button class="layui-btn layui-btn-primary search_inline" type="reset">重置</button>
								</form>
								<!-- 搜索 -->

								<table class="layui-hide" id="test-table-operate" lay-filter="test-table-operate">
								</table>

								<script type="text/html" id="test-table-operate-barDemo">
									<a class="layui-btn layui-btn-xs layui-btn-normal" lay-event="detail">明细</a>
									<a class="layui-btn layui-btn-xs" lay-event="orderdetail">订单详情</a>
									<!--<a class="layui-btn layui-btn-xs layui-btn-danger" lay-event="edit">配送</a>-->
									{{# if(d.status == 30 ){ }}
										<a class="layui-btn layui-btn-xs layui-btn-danger" lay-event="edit">配送</a>
										{{# } }}

											<a class="layui-btn layui-btn-xs layui-btn-danger" lay-event="edit_orders_sub">修改</a>
											<!--<a class="layui-btn layui-btn-xs layui-btn-normal" lay-event="wait_confirm">确认订单</a>-->
								</script>
								<script type="text/html" id="test-table-operate-cancel">
								{{# if(d.status >= 30 ){ }}
									<a class="layui-btn layui-btn-xs layui-btn-danger" lay-event="ordercancel">取消订单</a>
									{{# } }}
								</script>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>

		<!--商品详情-->
		<script type="text/html" id="test-table-operate-goods">
			<font style="color: #000;">订单编号：{{d.orderid?d.orderid:''}}</font><br>
		
			{{# if(d.seckill_no ){ }}
				<font style="color: red;">拼团期号：{{d.seckill_no?d.seckill_no:''}}</font><br>
				{{# } }}
		
				{{# layui.each(d.orders_sub_list,function(index,o){ }}
					{{# if(o.goods_image_url){ }}
						<div class="tDiv relative     " style="text-align: left;">
							<div class="img" style="display: inline-block;vertical-align: top;">
								<img width="70" src={{o.goods_image_url}} alt="">
							</div>
							<div class="tDiv" style="display: inline-block;vertical-align: top;">
								X {{o.quantity}}
							</div>
	
							<div class="name mb5" style="display: inline-block;vertical-align: top;width: 330px;">
								商品编号:<span id="" class="importane"> {{o.skuid}} </span>
								<br />
								商品名称:{{o.skuname?o.skuname:''}}
								<br /> 规格参数:{{o.specparam?o.specparam:''}}
								<br /> 店铺:{{ o.support?o.support:'' }},
							</div>
						</div>
					{{# }}}
			{{# })}}
		</script>
		<!--返佣详情-->
		<script type="text/html" id="test-table-operate-orders_fee">

		{{# if(d.orders_fee){ }}
			<font style="color: #000;">订单编号：{{d.orderid?d.orderid:''}}</font><br>
			{{# }}}
				{{# layui.each(d.orders_fee,function(index,o){ }}
					<div class="tDiv left" style="text-align: left;">
						<font style="color: #000;">推荐人编号：{{o.recommend?o.recommend:''}}</font><br>
						<font style="color: #000;">佣金：{{o.recommend_fee?o.recommend_fee:''}}</font><br>
					</div>
					{{# })}}
		</script>
		<!--订单信息-->
		<script type="text/html" id="test-table-operate-order_detail">
			<div class="tDiv left" style="text-align: left;">
				<font style="color: #000;">运费：{{d.price_waybill?d.price_waybill:''}}</font><br>
				<font style="color: #000;">订单金额：{{d.amount?d.amount:''}}</font><br>
				<font style="color: #000;">抵扣金额：{{d.fee?d.fee:''}}</font><br>
				<font style="color: #000;">使用积分：{{d.fee_score?d.fee_score:''}}</font><br>
				<font style="color: #000;">使用积分比例：{{String(d.fee_score_scale)?d.fee_score_scale:''}}</font><br>
				<font style="color: #000;">使用红包：{{d.fee_packet?d.fee_packet:''}}</font><br>
				<font style="color: #000;">专属折扣：{{d.discount?d.discount:''}}</font><br>
				<font style="color: #000;">商品数量：{{d.quantity?d.quantity:''}}</font><br>
				<font style="color: #000;">支付金额：
					<span id="" class="importane">
						{{d.pay_price?d.pay_price:''}}
					</span>
				</font><br>
				<font style="color: #000;">
					付款方式：{{d.payment ? '<span class="text_red_color">' + payment_show(1, d.payment) + '</span>' : '未付款'}} </font>
			</div>
		</script>
		<!--会员信息-->
		<script type="text/html" id="test-table-operate-member">
			<div class="tDiv left" style="text-align: left;">
				<font style="color: #000;">会员编号：{{d.memberid?d.memberid:''}}</font><br>
				<font style="color: #000;">用户编号：{{d.userid?d.userid:''}}</font><br>
				<font style="color: #000;">店铺编号：{{d.agentshopid?d.agentshopid:''}}</font><br>
				<font style="color: #000;">店铺名称：{{d.shopname?d.shopname:''}}</font><br>
				<font style="color: #000;">用户姓名：{{d.name?d.name:''}}</font><br>
				<font style="color: #000;">用户手机：{{d.membermobile?d.membermobile:''}}</font><br>
			</div>
		</script>

		<!-- 核销信息 -->
		<script type="text/html" id="test-table-operate-quantity">
			<div class="tDiv" style="text-align: left;">
				<div>
					总数量：{{d.quantity?d.quantity:0}}
				</div>
				<div>
					核销数量：{{d.used_quantity?d.used_quantity:0}} </div>
				<div>
					剩余数量：{{d.quantity-d.used_quantity}}

				</div>
			</div>
		</script>
		<!--收货人信息-->
		<script type="text/html" id="test-table-operate-consignee">
			<div class="tDiv" style="text-align: left;">
				<div>
					姓名：{{d.consignee?d.consignee:''}}
				</div>
				<div>
					电话：{{d.mobile?d.mobile:''}} </div>
				<div>
					地址：
					<font>{{ d.areaname?d.areaname :''}} </font> <br>
					<font class="line-text"> {{ d.address?d.address :''}} </font>
				</div>
			</div>
		</script>

		<!--客户备注信息-->
		<script type="text/html" id="test-table-operate-notes">
			<div>
				<font style="color: red; font-size: 15px;">{{ d.notes?d.notes :''}} </font>
			</div>
			</div>
		</script>

		<!--订单记录时间-->
		<script type="text/html" id="test-table-operate-member_time">
			<div class="tDiv" style="text-align: left;">
				<div>
					下单时间：{{d.addtime?d.addtime:''}}
				</div>
				<div>
					付款时间：{{d.pay_time?d.pay_time:''}}
				</div>
				<div>
					完成时间：{{ d.finish_time?d.finish_time :''}}
				</div>
			</div>
		</script>

		<!--备注-->
		<script type="text/html" id="mark">
			<div class="tDiv notes" style="text-align: left;color: red;font-size: 14px;" value="{{d.id}}" order="{{d.orderid}}"
				data-method="notes_edit">
				{{d.mark?d.mark:'点击此处添加系统备注'}}
			</div>
		</script>

		<script type="text/html" id="delivery">
			<div class="tDiv" style="text-align: left;">
				<div>
					快递公司：{{d.delivery_name?d.delivery_name:''}} {{d.delivery_no?'('+d.delivery_no+')':''}}
				</div>
				<div>
					快递单号：{{d.delivery_waybill?d.delivery_waybill:''}}
				</div>
				<div>
					系统备注：{{ d.op_remark?d.op_remark :''}}
				</div>
				<div>
					订单图片：{{ d.delivery_url ? '<a href="javascript:;" class="text_blue_color" lay-event="seeimg">查看</a>' : ''}}
				</div>
				<div>
					分期：{{ d.fq ? d.fq : ''}}
				</div>
				{{# if(d.status <= 60  && d.status >=  20 ){ }}
					<a class="layui-btn layui-btn-xs layui-btn-danger" lay-event="edit_deliver">修改配送信息</a>
					{{# } }}
			</div>
		</script>

		<script type="text/html" id="demo_ul">
			<li class="layui-this" lay-id=''>全部</li>
			<li class="" lay-id='0'>已取消</li>
			<li class="" lay-id='10'>待支付</li>
			<li class="" lay-id='30'>待使用</li>
			<li class="" lay-id='70'>已完成</li>
			<!-- {{# layui.each(d, function(index, item){ }}
				<li class="" lay-id='{{ item.value }}'>{{ item.name }}</li>
				{{# }); }} -->
		</script>
		<script src="../../../layuiadmin/layui/layui.js"></script>
		<script src="../../../js/jquery.min.js"></script>
		<script src="../../../js/common.js"></script>
		<script>
			layui.config({
				base: '../../../layuiadmin/' //静态资源所在路径
			}).extend({
				index: 'lib/index' //主入口模块
			}).use(['index', 'table', 'form', 'laydate', 'element', 'laytpl'], function() {
				var table = layui.table,
					laydate = layui.laydate,
					$ = layui.$,
					form = layui.form,
					laytpl = layui.laytpl,
					element = layui.element,
					admin = layui.admin;

				var _data = {}

				order_status_show('option')
				payment_show('option');
				initdata();
				
				function initdata() {
					//alert(_data.order_type);
					if(!_data.order_type)_data.order_type = '6,7'
					table.render({
						elem: '#test-table-operate',
						url: server.queryorders_goods,
						totalRow: true,
						toolbar: true,
						height: 'full-165',
						cols: [
							[{
									type: 'checkbox',
								}, {
									width: 60,
									type: 'numbers',
									title: '序号',
								}, {
									width: 200,
									align: 'center',
									toolbar: '#test-table-operate-barDemo',
									title: '操作',
									totalRowText: '合计：'
								}, {
									field: 'status',
									width: 120,
									title: '状态',
									templet: function(d) {
										if (d.status == 0) {
											return '已取消'
										} else if (d.status == 10) {
											return '待支付'
										} else if (d.status == 20) {
											return '已支付待成团'
										} else if (d.status == 30) {
											return '待使用'
										} else if (d.status == 70) {
											return '已完成'
										}

									}
								}, {
									width: 180,
									field: 'memberid',
									title: '会员信息',
									toolbar: '#test-table-operate-member',
									sort: true
								},
								{
									width: 350,
									title: '核销信息',
									field: 'consignee',
									templet: '#test-table-operate-quantity'
								},
								{
									width: 350,
									title: '收件人信息',
									field: 'consignee',
									templet: '#test-table-operate-consignee'
								}, {
									width: 150,
									title: '支付信息',
									field: 'consignee',
									templet: '#test-table-operate-order_detail'
								}, {
									field: 'type',
									title: '订单信息',
									width: 450,
									templet: '#test-table-operate-goods'
								}, {
									field: 'notes',
									title: '客户备注',
									width: 180,
									templet: '#test-table-operate-notes'
								}, {
									title: '下单时间',
									width: 220,
									templet: '#test-table-operate-member_time',
									field: 'serve_dates',
									sort: true
								}, {
									width: 350,
									title: '快递信息',
									field: 'consignee',
									templet: '#delivery'
								}, {
									width: 200,
									align: 'center',
									toolbar: '#test-table-operate-cancel',
									title: '取消订单',
								}, {
									title: '订单返佣',
									width: 220,
									templet: '#test-table-operate-orders_fee',
									field: 'orders_fee',
									sort: true
								},
							]
						],
						page: true,
						where: _data,
						limit: limit,
						limits: limits,
						request: {
							pageName: 'page',
							limitName: 'size' //每页数据量的参数名，默认：limit
						},
						parseData: function(res) { //将原始数据解析成 table 组件所规定的数据r
							console.log(res)
							return {
								"code": res.code, //解析接口状态
								"msg": res.msg, //解析提示文本
								"count": res.orders.pager.total, //解析数据长度
								"data": res.orders.data //解析数据列表
							};
						}
					});
				}
				laydate.render({
					elem: '#choosetime',
					type: 'datetime',
					range: true,
					done: function(value, date) {
						$('input[name=s_dates]').val(value.split(' - ')[0]);
						$('input[name=e_dates]').val(value.split(' - ')[1]);
					}
				});
				//监听搜索
				form.verify({
					memberid: function(value, item) { //value：表单的值、item：表单的DOM对象
						if (!value) {
							return '姓名不能为空';
						}
					}
				});
				//监听搜索
				form.on('submit(search)', function(data) {
					_data = Object.assign(_data, data.field);
					initdata();

					return false;
				});

				$("button[type=reset]").on("click", function() {
					_data = {}
					$('input[name=s_dates]').val('')
					$('input[name=e_dates]').val('')
					initdata();
					document.getElementById("form").reset();
				});

				//监听表格复选框选择
				table.on('checkbox(test-table-operate)', function(obj) {
					console.log(obj)
				});
				//监听TAB
				element.on('tab(changetab)', function(elem) {
					status = this.getAttribute('lay-id');
					_data.status = status;
					initdata();
				});

				function initstatusdata() {
					$.ajax({
						type: "get",
						url: server.querymap,
						async: false,
						success: function(res) {
							if (res.code == 0) {
								map = res.dict_libraries_list.data;
								var data = map.order_status
								console.log(data)
								var getTpl = demo_ul.innerHTML,
									view = document.getElementById('view_ul');
								laytpl(getTpl).render(data, function(html) {
									view.innerHTML = html;
								});
								element.init();
							} else {
								layer.msg(res.msg);
							}
						}
					});

				}
				//监听工具条
				table.on('tool(test-table-operate)', function(obj) {
					var data = obj.data;
					if (obj.event === 'detail') {
						layer.open({
							type: 2,
							title: '明细',
							shadeClose: false,
							shade: 0.5,
							maxmin: true, //开启最大化最小化按钮
							area: ['80%', '70%'],
							content: 'sub_order.html?orderid=' + data.orderid,
							end: function() {}
						});
					} else if (obj.event === 'orderdetail') {
						layer.open({
							type: 2,
							title: '订单详情',
							shadeClose: false,
							shade: 0.5,
							area: ['90%', '90%'],
							content: '../model/order_details2.html?id=' + data.id + '&orderid=' + data
								.orderid,
							end: function() {}
						});

						//location.href = '../model/order_details.html?id=' + data.id

						//location ='../model/order_details.html?id=' + data.id
					} else if (obj.event === 'edit') {
						layer.open({
							type: 2,
							title: '配送',
							shadeClose: false,
							shade: 0.5,
							maxmin: true, //开启最大化最小化按钮
							area: ['85%', '70%'],
							content: '../model/collage_order_delivery.html?id=' + data.id + '&orderid=' +
								data.orderid + '&quantity=' + data.quantity + '&memberid=' + data
								.memberid + '&specname=' + data.specname + '&type=' + data.type,
							end: function() {}
						});
					} else if (obj.event === 'wait_confirm') {
						/*layer.confirm('确定要将此订单改为待确认收货状态？', function() {
							$.ajax({
								url: server,
								type: 'post',
								dataType: 'json',
								data: "orderid=" + orderid,
								success: function(data) {
									if(data.code == '0') {
										
									} else {
										
									}
								},
								'error': function() {
									layer.msg('系统错误');
									
								}
							})
						});*/
					} else if (obj.event === 'seeimg') {
						var img_data = {
							"data": [{
								"src": data.delivery_url
							}]
						}
						layer.photos({
							photos: img_data,
							anim: 5 //0-6的选择，指定弹出图片动画类型，默认随机
						});
					} else if (obj.event === 'edit_deliver') {
						layer.open({
							type: 2,
							title: '配送',
							shadeClose: false,
							shade: 0.5,
							area: ['85%', '70%'],
							content: '../model/order_delivery.html?id=' + data.id + '&orderid=' + data
								.orderid + '&quantity=' + data.quantity + '&memberid=' + data.memberid +
								'&specname=' + data.specname,
							end: function() {}
						});
					} else if (obj.event === 'ordercancel') {
						var lock = false
						layer.confirm('确定要取消订单？', function() {
							if (!lock) {
								lock = true
								$.ajax({
									url: server.sys_order_cancel,
									type: 'post',
									dataType: 'json',
									data: "orderid=" + data.orderid,
									success: function(data) {
										if (data.code == '0') {
											layer.msg("取消成功")
											initdata();
										} else {
											layer.msg(data.msg)
										}
									},
									'error': function() {
										layer.msg('系统错误');

									}
								})
							}

						});

					} else if (obj.event === 'edit_orders_sub') {

						var url = 'views/shop_manage/model/orders_sub_edit.html?id=' + data.id + '&orderid=' +
							data.orderid
						if (top.layui.index) {
							top.layui.index.openTabsPage(url, '修改订单信息')
						} else {
							window.open(url)
						}
					}

				});

				var $ = layui.$,
					active = {
						del: function() { //获取选中数据
							var checkStatus = table.checkStatus('test-table-operate'),
								data = JSON.stringify(checkStatus.data);
							var orderid = "";
							for (var i = 0; i < checkStatus.data.length; i++) {
								orderid += checkStatus.data[i].orderid;
								if (i != checkStatus.data.length - 1) {
									orderid += ",";
								}
							}
							if (checkStatus.data.length == 0) {
								layer.msg('至少选择一条')
							} else {
								var lock = false
								layer.confirm('确定要删除所选的' + checkStatus.data.length + '条数据？', function() {
									if (!lock) {
										lock = true
										$.ajax({
											url: server.orders_delete,
											type: 'post',
											dataType: 'json',
											data: "orderid=" + orderid,
											success: function(data) {
												if (data.code == '0') {
													layer.msg('删除成功');
													initdata();
												} else {
													layer.msg('删除失败');
													initdata();
												}
											},
											'error': function() {
												layer.msg('系统错误');
												initdata();
											}
										})
									}

								});
							}
						},
						getCheckData: function() { //获取选中数据
							var checkStatus = table.checkStatus('test-table-operate'),
								data = checkStatus.data;
							layer.alert(JSON.stringify(data));
						},
						getCheckLength: function() { //获取选中数目
							var checkStatus = table.checkStatus('test-table-operate'),
								data = checkStatus.data;
							layer.msg('选中了：' + data.length + ' 个');
						},
						isAll: function() { //验证是否全选
							var checkStatus = table.checkStatus('test-table-operate');
							layer.msg(checkStatus.isAll ? '全选' : '未全选')
						}
					};

				$('.table-operate-btn .layui-btn').on('click', function() {
					var type = $(this).data('type');
					active[type] ? active[type].call(this) : '';
				});

			});
		</script>
	</body>

</html>
